<template>
    <div class="float-ball" ref="floatBall" @mousedown="startDrag" :class="{ 'expanded': isExpanded }">
        <div class="ball-content" @click="toggleExpand">
            <el-icon>
                <Setting />
            </el-icon>
        </div>

        <!-- 展开的控制面板 -->
        <div class="control-panel" v-show="isExpanded" :style="panelPosition">
            <div class="panel-header" @mousedown.stop="startPanelDrag">
                <span>主题设置</span>
                <el-icon class="close-icon" @click="isExpanded = false">
                    <Close />
                </el-icon>
            </div>

            <!-- 主题切换 -->
            <div class="theme-switch">
                <div class="switch-ball" :class="{ 'dark': isDark }" @click="toggleTheme">
                    <el-icon v-if="isDark">
                        <Moon />
                    </el-icon>
                    <el-icon v-else>
                        <Sunny />
                    </el-icon>
                </div>
                <span>{{ isDark ? '暗色模式' : '亮色模式' }}</span>
            </div>

            <!-- 主题色设置 -->
            <div class="color-settings">
                <span>主题色</span>
                <div class="color-options">
                    <div v-for="color in themeColors" :key="color" :style="{ backgroundColor: color }"
                        @click="changeThemeColor(color)" class="color-item"></div>
                </div>
            </div>

            <!-- 字体设置 -->
            <div class="font-settings">
                <span>字体大小</span>
                <el-slider v-model="fontSize" :min="12" :max="20" @change="changeFontSize" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { Setting, Close, Moon, Sunny } from '@element-plus/icons-vue'
import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)

const isExpanded = ref(false)
const floatBall = ref<HTMLElement | null>(null)
const isDragging = ref(false)
const startPos = ref({ x: 0, y: 0 })
const ballPos = ref({
    x: window.innerWidth - 70, // 考虑悬浮球宽度(50px)和右边距(20px)
    y: window.innerHeight - 70 // 考虑悬浮球高度(50px)和底部距离(20px)
})

// 计算面板位置
const panelPosition = computed(() => {
    const screenWidth = window.innerWidth
    const screenHeight = window.innerHeight
    const ballRight = ballPos.value.x + 50
    const ballBottom = ballPos.value.y + 50
    const panelWidth = 280
    const panelHeight = 400 // 估算面板高度

    let position = {
        left: '60px',
        right: 'auto',
        top: '0px',
        bottom: 'auto'
    }

    // 处理水平方向
    if (ballRight + panelWidth > screenWidth - 20) {
        position.right = '60px'
        position.left = 'auto'
    }

    // 处理垂直方向
    if (ballBottom + panelHeight > screenHeight - 20) {
        position.bottom = '0px'
        position.top = 'auto'
    }

    return position
})

// 菜单主题配色方案
const menuColors = [
    {
        name: '深蓝',
        bg: '#151a2e',
        textColor: '#fff',
        subMenuBg: '#1d2235',
        hoverBg: 'rgba(255, 255, 255, 0.1)',
        activeColor: '#409EFF'
    },
    {
        name: '暗黑',
        bg: '#1f1f1f',
        textColor: '#fff',
        subMenuBg: '#2d2d2d',
        hoverBg: 'rgba(255, 255, 255, 0.1)',
        activeColor: '#409EFF'
    },
    {
        name: '浅色',
        bg: '#ffffff',
        textColor: '#303133',
        subMenuBg: '#f5f7fa',
        hoverBg: '#ecf5ff',
        activeColor: '#409EFF'
    }
]

// 主题色选项
const themeColors = [
    '#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399'
]

// 字体大小
const fontSize = ref(14)

// 修改菜单主题
const changeMenuTheme = (theme: typeof menuColors[0]) => {
    const menu = document.querySelector('.sidebar') as HTMLElement
    if (menu) {
        // 清除之前的样式
        const oldStyle = document.getElementById('menu-theme-style')
        if (oldStyle) {
            oldStyle.remove()
        }

        // 创建新的样式
        const style = document.createElement('style')
        style.id = 'menu-theme-style'
        style.textContent = `
            .sidebar {
                background-color: ${theme.bg} !important;
                color: ${theme.textColor} !important;
            }
            .el-menu {
                background-color: ${theme.bg} !important;
            }
            .el-sub-menu .el-menu {
                background-color: ${theme.subMenuBg} !important;
            }
            .el-menu-item, 
            .el-sub-menu__title {
                color: ${theme.textColor} !important;
            }
            .el-menu-item:hover,
            .el-sub-menu__title:hover {
                background-color: ${theme.hoverBg} !important;
            }
            .el-menu-item.is-active {
                color: ${theme.activeColor} !important;
                background-color: ${theme.hoverBg} !important;
            }
            .container {
                background-color: ${isDark.value ? '#1a1a1a' : '#f5f7fa'} !important;
                color: ${theme.textColor} !important;
            }
            .container.dark {
                background-color: #1a1a1a !important;
            }
        `
        document.head.appendChild(style)

        // 更新CSS变量
        const root = document.documentElement
        root.style.setProperty('--el-menu-bg-color', theme.bg)
        root.style.setProperty('--el-menu-text-color', theme.textColor)
        root.style.setProperty('--el-menu-hover-bg-color', theme.hoverBg)
        root.style.setProperty('--el-menu-active-color', theme.activeColor)
        root.style.setProperty('--header-bg-light', theme.bg === '#ffffff' ? '#f5f7fa' : theme.bg)
        root.style.setProperty('--header-bg-dark', '#1a1a1a')
    }
}

// 监听暗色模式变化
watch(isDark, (newValue) => {
    // 根据暗色模式自动切换菜单主题
    if (newValue) {
        changeMenuTheme(menuColors[1]) // 暗黑主题
    } else {
        changeMenuTheme(menuColors[2]) // 浅色主题
    }
})

// 拖动相关方法
const startDrag = (e: MouseEvent) => {
    isDragging.value = true
    startPos.value = {
        x: e.clientX - ballPos.value.x,
        y: e.clientY - ballPos.value.y
    }
    document.addEventListener('mousemove', onDrag)
    document.addEventListener('mouseup', stopDrag)
}

const onDrag = (e: MouseEvent) => {
    if (!isDragging.value) return
    const maxX = window.innerWidth - 60
    const maxY = window.innerHeight - 60

    ballPos.value = {
        x: Math.min(Math.max(0, e.clientX - startPos.value.x), maxX),
        y: Math.min(Math.max(0, e.clientY - startPos.value.y), maxY)
    }

    if (floatBall.value) {
        floatBall.value.style.left = `${ballPos.value.x}px`
        floatBall.value.style.top = `${ballPos.value.y}px`
    }
}

const stopDrag = () => {
    isDragging.value = false
    document.removeEventListener('mousemove', onDrag)
    document.removeEventListener('mouseup', stopDrag)
}

// 展开/收起面板
const toggleExpand = () => {
    if (!isDragging.value) {
        isExpanded.value = !isExpanded.value
    }
}

// 切换主题
const toggleTheme = () => {
    toggleDark()
}

// 修改字体大小
const changeFontSize = (size: number) => {
    document.documentElement.style.fontSize = `${size}px`
}

// 修改主题色
const changeThemeColor = (color: string) => {
    document.documentElement.style.setProperty('--el-color-primary', color)
}

// 面板拖动相关方法
const startPanelDrag = (e: MouseEvent) => {
    isDragging.value = true
    startPos.value = {
        x: e.clientX - ballPos.value.x,
        y: e.clientY - ballPos.value.y
    }
    document.addEventListener('mousemove', onDrag)
    document.addEventListener('mouseup', stopDrag)
}

// 添加窗口大小变化监听
const updatePosition = () => {
    // 确保悬浮球不会超出屏幕
    ballPos.value = {
        x: Math.min(window.innerWidth - 70, ballPos.value.x),
        y: Math.min(window.innerHeight - 70, ballPos.value.y)
    }
    
    if (floatBall.value) {
        floatBall.value.style.left = `${ballPos.value.x}px`
        floatBall.value.style.top = `${ballPos.value.y}px`
    }
}

// 在组件挂载时初始化主题和位置
onMounted(() => {
    // 设置初始主题
    changeMenuTheme(isDark.value ? menuColors[1] : menuColors[2])
    
    // 设置初始位置
    updatePosition()
    
    // 添加窗口大小变化监听
    window.addEventListener('resize', updatePosition)
})

onUnmounted(() => {
    // 移除事件监听
    document.removeEventListener('mousemove', onDrag)
    document.removeEventListener('mouseup', stopDrag)
    window.removeEventListener('resize', updatePosition)
})
</script>

<style scoped>
.float-ball {
    position: fixed;
    z-index: 999;
    cursor: move;
    transition: all 0.3s;
}

.ball-content {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: var(--el-color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s;
}

.control-panel {
    position: absolute;
    width: 280px;
    background: var(--el-bg-color);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 16px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--el-border-color-light);
}

.theme-switch {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.switch-ball {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.switch-ball.dark {
    background: #34495e;
    color: white;
}

.color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.color-item {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s;
}

.color-item:hover {
    transform: scale(1.1);
}

/* 暗色模式样式 */
:root[class~='dark'] .control-panel {
    background: #1a1a1a;
    color: white;
}

:root[class~='dark'] .ball-content {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
</style>